<template>
	<view class="purchase">
		<!-- 提示框 -->
		<view class="titleBox">
			<!-- 支付自动取消 -->
			<view class="paymentTime">
				<view class="text" v-if="pageData.status == 0">请在<view class="time">{{countdownm}}分{{countdowns}}秒</view>内完成支付</view>
				<view class="text" v-if="pageData.status == 0">过时订单将自动取消</view>
				<view class="text" v-if="pageData.status == 1">订单已支付</view>
				<view class="text" v-if="pageData.status == 10">订单已回购</view>
				<view class="text" v-if="pageData.status == 2">待商家接单</view>
				<view class="text" v-if="pageData.status == 3">商品制作中</view>
				<view class="text" v-if="pageData.status == 5">商品配送中</view>
				<view class="text" v-if="pageData.status == 6">商品已送达</view>
				<view class="text" v-if="pageData.status == 4">商品待配送</view>
				<view class="text" v-if="pageData.status == 7">订单已完成</view>
				<view class="text" v-if="pageData.status == 8">用户取消</view>
				<view class="text" v-if="pageData.status == 9">商家取消</view>
				<view class="text" v-if="pageData.status == 11">未及时支付，订单已关闭</view>
				<view class="text" v-if="pageData.status == 12">商品已回购</view>
			</view>
		</view>

		<!-- 订单详情 -->
		<view class="orderDetails">
			<view class="detailsBox flex-r-b-c">
				<image :src="goods_img" mode=""></image>
				<view class="details_r">
					<view class="details_r_t flex-r-b-c">
						<view class="name">{{goods_name}}</view>
						<view class="money" style="font-weight: 500;">¥{{pageData.goods_price}}</view>
					</view>
					<view class="details_r_b flex-r-b-s">
						<view class="Specifications">{{guige}}</view>
						<view class="quantity" style="font-size: 28rpx;">x{{pageData.num}}</view>
					</view>
				</view>
			</view>

			<view class="costBox">
				<view class="cost flex-r-b-c">
					<view class="text">打包费</view>
					<view class="money">¥{{pageData.packing_price}}</view>
				</view>
				<view class="cost flex-r-b-c" style="margin-top: 20rpx;">
					<view class="text">配送费</view>
					<view class="money">¥{{pageData.distribution_price}}</view>
				</view>
			</view>


			<view class="total flex-r-b-c">
				<view class=""> </view>
				<view class="total_r">
					<view class="text">共{{pageData.num}}件，合计：<view class="money">¥{{pageData.actual_price}}</view>
					</view>
				</view>
			</view>

		</view>
		
		<!-- 按钮 -->
		<view class="btn" v-if="isBtn && pageData.status == 0" @tap.stop="payment">支付</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				image: this.$base.smallimgUrl,
				order_number: '',
				pageData: {},
				countdownm: '',
				countdowns: '',
				guige: '',
				timer: null,
				isBtn: null,
				goods_img:'',
				goods_name:''
			};
		},
		onLoad(el) {
			console.log(el,'el')
			this.order_number = el.order_number
			this.goods_img = el.goods_img
			this.goods_name = el.goods_name
		},
		onShow() {
			this.getPaymentOrder()
		},
		onUnload(el) {
			let that = this
			if(that.timer){
				clearInterval(that.timer);
				that.timer= null;
			}
		},
		methods: {
			// 支付订单页面
			getPaymentOrder(){
				let that = this
				that.$api.orderDetials({
					order_number: this.order_number
				}).then(res => {
					let guige = []
					that.pageData = res.data.data
					console.log(that.pageData.status,'status')
					if(that.pageData.status != 0){
						uni.switchTab({
							url:'/pages/tabBar/home/home'
						})
					}
					res.data.data.minitype.length == 0 ? that.guige = '无' : res.data.data.minitype.map(e => {
						guige.push(e)
					})
					that.guige = guige.join('+')
					that.timer = setInterval(() => {
					that.showtime()
					},1000)
				})
			},
			// 倒计时
			showtime() {
				let that = this
				let nowtime = (new Date().getTime()/1000).toFixed(0),
				    lefttime = that.pageData.overdue_time - nowtime,
					leftm = Math.floor(lefttime / 60 % 60) < 10 ? "0" + Math.floor(lefttime / 60 % 60) : Math.floor(lefttime / 60 % 60), //计算分钟数
					lefts = Math.floor(lefttime % 60) < 10 ? "0" + Math.floor(lefttime % 60) : Math.floor(lefttime % 60); //计算秒数
				that.countdownm = leftm //返回倒计时的字符串
				that.countdowns = lefts //返回倒计时的字符串
				that.isBtn = true
				// 倒计时结束时，显示00:00:00
				if (lefttime < 0) {
					that.countdownm = that.countdowns = "00"
					that.isBtn = false
					clearInterval(that.timer)
				}
			},
			// 支付
			payment(){
				let that = this
				that.$api.weChatPay({
					type: 'df',
					order_number: that.order_number
				}).then(res => {
					uni.requestPayment({
						...res.data.data,
						success(res) {
							console.log(res)
							that.$utils.toast('支付成功')
							that.getPaymentOrder()
							that.isBtn = false
						},
						fail(err) {
							console.log(err)
							that.$utils.toast('支付失败')
						}
					})
				})
			}
		}
	}
</script>

<style lang="less">
	page {
		background: #f9f9f9;
	}

	.purchase {
		width: 100vw;

		.titleBox {
			.paymentTime {
				width: 90%;
				margin: 20rpx auto;
				background: #fff;
				border-radius: 20rpx;
				padding: 30rpx;
				text-align: center;

				.time {
					display: inline-block;
					color: #000;
					font-weight: 500;
				}

				.text {
					font-size: 28rpx;
					font-weight: 400;
					color: #7F8084;
				}
			}
		}

		.orderDetails {
			width: 90%;
			margin: 40rpx auto;
			padding: 30rpx;
			border-radius: 20rpx;
			background-color: #fff;

			.detailsBox {
				width: 100%;
				padding-bottom: 30rpx;
				border-bottom: 1px solid #F9F9F9;

				image {
					width: 139rpx;
					height: 154rpx;
				}

				.details_r {
					width: 70%;

					.details_r_t {
						font-size: 28rpx;
						font-weight: 400;
					}

					.details_r_b {
						margin-top: 20rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #7F8084;

						.Specifications {
							width: 60%;
						}
					}
				}
			}


			.costBox {
				width: 100%;
				padding: 30rpx 0rpx;
				border-bottom: 1px solid #F9F9F9;

				.cost {
					font-size: 28rpx;
					font-weight: 400;
					color: #7F8084;
				}
			}


			.total {
				padding: 20rpx 0rpx;

				.total_r {
					font-size: 28rpx;
					font-weight: 400;
					color: #7F8084;

					.money {
						display: inline-block;
						font-size: 32rpx;
						color: #000;
					}
				}
			}
		}
		
		.btn{
			width: 90%;
			height: 96rpx;
			line-height: 96rpx;
			text-align: center;
			border-radius: 96rpx;
			background-color: #000;
			color: #fff;
			font-size: 28rpx;
			font-weight: 500;
			position: fixed;
			left: 50%;
			bottom: 200rpx;
			transform: translateX(-50%);
		}
		
	}
</style>
